<template>

  <div class="app-container">

    <el-form :inline="true" :model="queryForm" class="demo-form-inline" >
<!--      <el-form-item style="margin-bottom:10px;">
        <el-input v-model="queryForm.keywords" prefix-icon="el-icon-search" placeholder="主机名称" style="width: 18.75rem;" @input="onQuerySubmit" />
      </el-form-item> -->
<!--      <el-form-item style="margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus"  :loading="loading" @click="handleAdd" >登记主机</el-button>
      </el-form-item> -->
    </el-form>
    <el-table
      :data="tableData"
      border
      fixed
      empty-text="暂无数据."
      style="width: 100%">
      <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          :index="indexMethod">
        </el-table-column>

      <el-table-column
        prop="terminaName"
        label="渲染主机"
        >
      </el-table-column>

      <el-table-column
        prop="sceneName"
        label="场景名称"
        >
      </el-table-column>

      <el-table-column
        prop="projectName"
        label="项目名称"
        >
      </el-table-column>

      <el-table-column
        prop="orgName"
        label="单位"
        >
      </el-table-column>

      <el-table-column
        prop="startTime"
        label="请求时间"
        >
        <template slot-scope="scope">
          {{scope.row.startTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column
        prop="connected"
        label="响应状态"
        >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.connected"  type="success">正常</el-tag>
          <el-tag v-else type="warning" >待响应</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="connectedTime"
        label="响应时间"
        >
        <template slot-scope="scope">
          {{scope.row.connectedTime | dateFormat }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" fixed="right">
       <template slot-scope="scope">
         <!-- <el-button type="text"  size="small" @click="handleEdit(scope.row)">详情</el-button> -->
         <el-button type="text" size="small" @click="handleDisconnect(scope.row)">断开</el-button>
         <el-button type="text" size="small" @click="getRemoteInfo(scope.row)">预览</el-button>
       </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>

    <!--编辑框-->
    <info-drawer
      v-if="infoDrawer.visible"
      :properties="infoDrawer"
      @closed="close"
      @refresh="load"
    />

    <!--服务-->
    <server-drawer
      v-if="serverDrawer.visible"
      :properties="serverDrawer"
      @closed="close"
      @refresh="load"
    />

    <!--资源-->
    <resource-drawer
      v-if="resourceDrawer.visible"
      :properties="resourceDrawer"
      @closed="close"
      @refresh="load"
    />

  </div>
</template>

<script>
  import InfoDrawer from './components/InfoDrawer.vue'
  import ServerDrawer from './components/ServerDrawer.vue'
  import ResourceDrawer from './components/ResourceDrawer.vue'


  import {
    hasPermission
  } from '@/utils/permission'
  import {
    findPSList,
  } from '@/api/biz/pixelStreaming'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name:'PixelStreaming',
    components: {
      InfoDrawer,
      ServerDrawer,
      ResourceDrawer
    },
    data() {
      return {
        loading:false,
        baseUrl:process.env.VUE_APP_BASE_API,
        queryForm: {
          keywords: undefined,
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        tableData: [],
        infoDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        serverDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        resourceDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
      }
    },
    created() {
      this.load();
    },
    methods: {
      indexMethod(index) {
        return index +1;
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.queryForm.status='';
        this.load()
      },
      load(){
        this.loading=true
        findPSList({
          cur: this.page.cur,
          limit: this.page.limit,
          keywords: this.queryForm.keywords,
        }).then(rsp => {

          console.log(rsp)

          if(isOk(rsp)){
            const _data = rsp.result
            this.tableData = _data
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleAdd: function(e) {
        this.infoDrawer.visible = true
        this.infoDrawer.type = '0'
      },
      handleEdit: function(data) {
        this.infoDrawer.visible = true
        this.infoDrawer.type = '1'
        this.infoDrawer.data = data
      },
      handleServer: function(data) {
        this.serverDrawer.visible = true
        this.serverDrawer.type = '1'
        this.serverDrawer.data = data
      },
      handleResource: function(data) {
        this.resourceDrawer.visible = true
        this.resourceDrawer.type = '1'
        this.resourceDrawer.data = data
      },
      close: function(e) {
        this.infoDrawer.visible = false
        this.infoDrawer.data = {}
        this.serverDrawer.visible = false
        this.serverDrawer.data = {}
        this.resourceDrawer.visible = false
        this.resourceDrawer.data = {}
        this.load()
      },
      handleDisconnect: function(data) {

        this.$message({
          message: '构思中...',
          type: 'success',
          duration: 500
        })
        return

        this.$confirm('确认断开吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deleteTerminal({
            id: data.id
          }).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 3000
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      getRemoteInfo(data){

        this.$message({
          message: '构思中...',
          type: 'success',
          duration: 3000
        })
        return

        this.$confirm('确认同步主机信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          getRemoteInfo({
            id: data.id
          }).then(response => {
            this.$message({
              message: response.message,
              type: 'success',
              duration: 300
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      }
    }
  }
</script>
